<template>
  <div class="panel">
    <!-- 编辑操作 -->
    <div v-if="isActive === 1">
      <!-- 导航标签 -->
      <div class="nav-box">
        <a-checkbox-group
          v-model="value"
          name="checkboxgroup"
          :options="plainOptions"
          @change="onChange"
        />
      </div>
      <!-- 选中模型 -->
      <div class="model_box">
        <div class="model_header">
          <img src="@/assets//3d_icon//edit/data.png" alt="" />
          <span class="header_name">选中模型数据</span>
        </div>
        <ul class="model_ul">
          <li class="model_li" v-for="item in modelsList" :key="item.id">
            <span class="txt">{{ item.name }}:</span>
            <span class="txt">x : {{ item.x }}</span>
            <span class="txt">y : {{ item.y }}</span>
            <span class="txt">z : {{ item.z }}</span>
          </li>
        </ul>
      </div>

      <!-- 场景雾化 -->
      <div class="title_header">
        <img src="@/assets//3d_icon//edit/atomization.png" alt="" />
        <span class="header_name">场景雾化</span>
      </div>
      <div class="checkbox">
        <a-checkbox @click="toAtom">场景雾化</a-checkbox>
      </div>
      <div class="color_box">
        <span class="color_name">雾化颜色：</span>
        <input class="input_color" type="color" v-model="Color" />
        <span class="color_name">{{ Color }}</span>
      </div>
      <div class="color_box">
        <span class="color_name">最小距离：</span>
        <input class="input_num" type="number" />
      </div>
      <div class="color_box">
        <span class="color_name">最大距离：</span>
        <input class="input_num" type="number" />
      </div>

      <!-- XYZ视图 -->
      <div class="title_header">
        <img src="@/assets//3d_icon//edit/xyz.png" alt="" />
        <span class="header_name">XYZ视图</span>
      </div>
      <ul class="xyz_ul">
        <li class="xyz_li" v-for="item in xyzList" :key="item.id">
          <img class="xyz_pic" :src="item.img" alt="" />
          <span class="xyz_name">{{ item.name }}</span>
        </li>
      </ul>

      <!-- 便捷操作 -->
      <div class="title_header">
        <img src="@/assets//3d_icon//edit/tool.png" alt="" />
        <span class="header_name">便捷操作</span>
      </div>
      <ul class="xyz_ul">
        <li class="xyz_li" v-for="item in toolList" :key="item.id">
          <img class="xyz_pic" :src="item.img" alt="" />
          <span class="xyz_name">{{ item.name }}</span>
        </li>
      </ul>
    </div>

    <!-- 绑定数据 -->
    <div v-else-if="isActive === 2">
      <span class="null">暂时数据</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: 1,
      plainOptions: ["设备数据标签", "xyz轴辅助线", "场景旋转动画"],
      value: [],
      Color: "#2493fa",
      modelsList: [
        {
          id: 1,
          name: "位置",
          x: "0.00",
          y: "0.00",
          z: "0.00",
        },
        {
          id: 2,
          name: "角度",
          x: "0.00",
          y: "0.00",
          z: "0.00",
        },
        {
          id: 3,
          name: "缩放",
          x: "0.00",
          y: "0.00",
          z: "0.00",
        },
      ],
      xyzList: [
        {
          id: 1,
          name: "X轴",
          img: require("@/assets//3d_icon//edit/lie-x.png"),
        },
        {
          id: 2,
          name: "Y轴",
          img: require("@/assets//3d_icon//edit/lie-y.png"),
        },
        {
          id: 3,
          name: "Z轴",
          img: require("@/assets//3d_icon//edit/lie-z.png"),
        },
      ],
      toolList: [
        {
          id: 1,
          name: "角度还原",
          img: require("@/assets//3d_icon//edit/angle_1.png"),
        },
        {
          id: 2,
          name: "位置还原",
          img: require("@/assets//3d_icon//edit/angle_2.png"),
        },
        {
          id: 3,
          name: "缩放还原",
          img: require("@/assets//3d_icon//edit/angle_3.png"),
        },
        {
          id: 4,
          name: "X轴转90度",
          img: require("@/assets//3d_icon//edit/angle_4.png"),
        },
        {
          id: 5,
          name: "Y轴转90度",
          img: require("@/assets//3d_icon//edit/angle_5.png"),
        },
        {
          id: 6,
          name: "Z轴转90度",
          img: require("@/assets//3d_icon//edit/angle_6.png"),
        },
      ],
    };
  },
  created() {
    this.$bus.$on("changeId", (val) => {
      // console.log("val===",val);
      this.isActive = val;
    });
  },
  methods: {
    onChange(checkedValues) {
      //   console.log('checked = ', checkedValues);
      //   console.log('value = ', this.value);
    },
    // 场景雾化
    toAtom(e) {
      console.log(`checked = ${e.target.checked}`);
    },
  },
  watch: {
    Color(old, Val) {
      // console.log("old",old);
      this.Color = old;
      // console.log("Val",Val);
    },
  },
};
</script>
<style lang="scss" scoped>
.panel {
  // flex: 1;
  // background-color: pink;
  color: #fff;
  font-family: Source Han Sans CN;
  overflow: scroll;
  height: 82vh;
  box-sizing: border-box;
  //   padding-bottom: 50px;

  //   background-color: pink;
  .nav-box {
    padding: 0 19px;
  }
  ::v-deep .ant-checkbox-group {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  ::v-deep .ant-checkbox-group-item {
    margin-right: 35px;
    margin-top: 19px;
  }
  ::v-deep .ant-checkbox + span {
    color: #fff;
    font-family: Source Han Sans CN;
  }

  ::v-deep .ant-checkbox-inner {
    background-color: #202735;
    border-radius: 2px;
    border: 1px solid #fff;
  }
  ::v-deep .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #fff;
  }

  ::v-deep .ant-checkbox-inner::after {
    border: 2px solid #202735;
    border-top: 0;
    border-left: 0;
  }
  .model_box {
    margin: 0 auto;
    margin-top: 20px;
    width: 320px;
    height: 147px;
    background: #2b3240;
    color: #fff;
    box-sizing: border-box;
    .model_header {
      padding: 20px 10px 0;
      display: flex;
      img {
        width: 19px;
        height: 19px;
      }
      .header_name {
        margin-left: 8px;
        color: #fff;
      }
    }
    .model_ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .model_li {
        padding-left: 10px;
        margin-top: 10px;
        .txt {
          color: #fff;
          font-size: 14px;
          font-weight: 300;
          margin-right: 10px;
        }
      }
    }
  }
  .title_header {
    margin-top: 20px;
    height: 36px;
    background-color: #2b3240;
    // line-height: 36px;
    display: flex;
    align-items: center;
    img {
      width: 19px;
      height: 19px;
      margin: 0 7px 0 20px;
    }
    .header_name {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
    }
  }
  .checkbox {
    text-align: left;
    margin-left: 20px;
    margin-top: 20px;
  }
  .color_box {
    text-align: left;
    margin-left: 20px;
    margin-top: 10px;
    .color_name {
      color: #fff;
      font-size: 14px;
    }
    .input_color {
      outline: none;
      border: none;
      margin: 0;
      width: 25px;
      height: 26px;
      background-color: transparent;
      margin-right: 5px;
    }
    .input_num {
      width: 120px;
      height: 28px;
      outline: none;
      border: none;
      border-radius: 4px;
      background-color: #272e3d;
      padding-left: 10px;
      color: #fff;
      border: 1px solid #3d4451;
      -moz-appearance: textfield;
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }
  .xyz_ul {
    padding: 0 20px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .xyz_li {
      margin-top: 20px;
      width: 87px;
      height: 80px;
      background-color: #252d3b;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .xyz_pic {
        display: block;
        width: 30px;
        height: 27px;
      }
      .xyz_name {
        margin-top: 6px;
        display: block;
        color: #fff;
      }
    }
  }
  .null {
    display: inline-block;
    color: #fff;
    margin-top: 20px;
  }
}
::-webkit-scrollbar {
  display: none;
}
</style>
